<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			#wrap {
				height: 100%;
				perspective: 200px;
			}

			#wrap>.inner {
				text-align: center;

				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%, -50%, 0);

				/* 不换行 */
				white-space: nowrap;
				transform-style: preserve-3d;
			}

			#wrap>.inner>img {
				position: relative;
				width: 30%;
				padding-bottom: 30px;
				animation: move 2s infinite linear;
			}

			@keyframes move {
				from {
					transform: rotateY(0deg);
				}

				to {
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				<img src="img/logo.png">
				<p>已加载0%</p>
				<!-- 这里有开机请求图片的代码，自己去找视频
				 file:///H:/尚硅谷前端学科全套教程/1.前端学科--基础阶段/尚硅谷css3教程/css3-2/53.尚硅谷_css3_开机动画(3D版本).wmv
				 -->
			</div>
		</div>
	</body>
</html>
